<template>
  <div class="search" :class="'column-' + column">
    <div v-for="(item, index) in list" :key="index" class="search-item flex flex-align-items-center">
      <p class="font-14">{{ item.label }}：</p>
      <el-input v-if="item.type === 'input'" v-model="form[item.key]" placeholder="请输入"></el-input>
      <el-select v-else-if="item.type === 'select'" v-model="form[item.key]" placeholder="请选择">
        <el-option v-for="(option, optionIndex) in item.options" :key="optionIndex" :label="option.label"
          :value="option.value"></el-option>
      </el-select>
      <el-date-picker v-else-if="item.type === 'daterange'" v-model="form[item.key]" type="daterange" range-separator=" "
        start-placeholder="开始" end-placeholder="结束" />
    </div>
    <div class="btns flex">
      <p class="font-14 pointer" @click="confirm">查询</p>
      <p class="font-14 pointer" @click="reset">重置</p>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue';
const props = defineProps(['list', 'info', 'column']);
const emit = defineEmits(['confirm']);

const form = ref(props.info);

const confirm = () => {
  emit('confirm', form.value);
}
const reset = () => {
  form.value = {};
  emit('confirm', {});
}
</script>

<style lang="less" scoped>
.search {
  padding: 16px 24px 0;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .08);
  margin-bottom: 24px;
  display: grid;

  &.column-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    .search-item:nth-child(3n) {
      margin-right: 0;
    }
  }

  &.column-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));

    .search-item:nth-child(4n) {
      margin-right: 0;
    }
  }

  .search-item {
    margin-bottom: 16px;
    margin-right: 40px;

    p {
      color: #333;
      width: 110px;
      text-align: right;
    }

    &::v-deep {

      .el-input,
      .el-select,
      .el-date-editor {
        flex: 1;
        width: 100%;
        height: 32px;
      }
    }
  }

  .btns {
    margin-bottom: 16px;

    p {
      min-width: 70px;
      padding: 0 8px;
      height: 32px;
      border-radius: 2px;
      text-align: center;

      &:first-child {
        background: @main-color;
        color: #fff;
        margin-right: 16px;
        line-height: 32px;
      }

      &:last-child {
        background: #fff;
        border: 1px solid #d9d9d9;
        color: #333;
        line-height: 30px;
      }
    }
  }
}
</style>
